<template>
  <div>
    <div class="majorName" >
      {{majorName}}专业教学计划
    </div>
  <el-table   :data="tableData"  stripe  style="width: 100%">
    <el-table-column type="index"   prop="num"  label="序号"  width="180">  </el-table-column>
    <el-table-column    prop="educationPlanId"    label="计划号">
     </el-table-column>
    <el-table-column      prop="educationGrade"      label="年级">    </el-table-column>
    <el-table-column      prop="courseName"      label="课程名称">
    </el-table-column>
    <el-table-column      prop="courseType"      label="课程类别">    </el-table-column>
    <el-table-column      prop="studyScore"      label="学分">    </el-table-column>
    <el-table-column      prop="studyTerm"      label="开课学期">    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>

<style scoped="scope">
  .majorName{
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: lightgray;
  }
</style>

<script>
  import {listEducation} from '@/axios/api'   //注意此处严格的格式
  export default {
    data() {
      return {
        majorName:'',
        num:1,
        pageIndex:1,
        pageSize:10,
        total:100,
        tableData: []
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageIndex = val ;
        this.getEducationMsg();
      },
      getEducationMsg:function(){
        let param  = {pageIndex: this.pageIndex};
        listEducation(param).then (res => {
          this.majorName = res.resData.list[0].major.majorName;
          this.total = res.resData.total,
          this.pageSize = res.resData.pageSize,
          this.tableData = res.resData.list;
        })
      }
    },

    //浏览器刷新则会立即加载
    mounted() {
      this.getEducationMsg();
    },

  }
</script>
